import { changearea, getShopCart } from '@/services/chdstore';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { useEffect, useRef, useState } from 'react';
import BillingInformation from './BillingInformation';
import Promotions from './Promotions';
import ShoppingList from './ShoppingList';

function ShopCart() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<any>({});
  const ref = useRef<any>(null);

  const init = async () => {
    setLoading(true);
    return getShopCart()
      .then((res) => {
        setData(res.data);
        return Promise.resolve(res.data);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const add = () => {
    return ref.current?.onCheckout();
  };

  useEffect(() => {
    init().then(() => {
      changearea();
    });
  }, []);

  return (
    <PageContainer
      header={{
        title: '',
      }}
    >
      <ProCard ghost gutter={[0, 8]} direction="column">
        <ProCard title="购物车列表" headerBordered>
          <ShoppingList ref={ref} init={init} setLoading={setLoading} />
        </ProCard>
        <ProCard title="结算信息" headerBordered>
          <BillingInformation
            init={init}
            data={data}
            loading={loading}
            setLoading={setLoading}
          />
        </ProCard>
        <ProCard title="促销活动" headerBordered>
          <Promotions init={init} data={data} add={add} />
        </ProCard>
      </ProCard>
    </PageContainer>
  );
}

export default ShopCart;
